<template>
  <a-drawer
    title="学历教育硕士（双证专业性学位）"
    wrapClassName="fullscreen"
    height="100%"
    placement="bottom"
    :closable="false"
    @close="handleCancel"
    :visible="editVisible" >
        <a-form :form="form" >
          <a-alert message="个人基本信息" type="info" />
            <a-row :gutter="48" style="width:100%">
          <a-col :md="20" :sm="24">
            <a-col :lg="8" :md="12" :sm="24">
                    <a-form-item
                        label="姓名"
                    >
                        <a-input />
                    </a-form-item>
                </a-col>
              <a-col :lg="8" :md="12" :sm="24">
                    <a-form-item
                        label="姓名拼音"
                    >
                        <a-select v-decorator="['zjlx',
                        {
                            rules: [{ required: true, message: '请选择证件类型!' }],
                        }]" >
                        <a-select-option v-for="i in TYPE0321" :key="i.id" :value="i.code">{{ i.name }}</a-select-option>
                        </a-select>
                    </a-form-item>
                </a-col>
                <a-col :lg="8" :md="12" :sm="24">
                    <a-form-item
                        label="身份证件类型"
                    >
                        <a-input  v-decorator="[
                        'zjh',
                        {
                            rules: [{ required: true, message: '请输入证件号!' }],
                        }
                        ]" />
                    </a-form-item>
                </a-col>
                <a-col :lg="8" :md="12" :sm="24">
                    <a-form-item
                        label="身份证号码"
                    >
                        <a-select v-decorator="['zjlx',
                        {
                            rules: [{ required: true, message: '请选择证件类型!' }],
                        }]" >
                        <a-select-option v-for="i in TYPE0321" :key="i.id" :value="i.code">{{ i.name }}</a-select-option>
                        </a-select>
                    </a-form-item>
                </a-col>
                <a-col :lg="8" :md="12" :sm="24">
                    <a-form-item
                        label="性别"
                    >
                        <a-select v-decorator="['bklb',
                        {
                            rules: [{ required: true, message: '请选择报考类别!' }],
                        }]" >
                        <a-select-option v-for="i in TYPE0321" :key="i.id" :value="i.code">{{ i.name }}</a-select-option>
                        </a-select>
                    </a-form-item>
                </a-col>
                <a-col :lg="8" :md="12" :sm="24">
                    <a-form-item
                        label="政治面貌"
                    >
                        <a-select v-decorator="['xyjr',
                        {
                            rules: [{ required: true, message: '请选择现役军人!' }],
                        }]" >
                        <a-select-option v-for="i in TYPE0321" :key="i.id" :value="i.code">{{ i.name }}</a-select-option>
                        </a-select>
                    </a-form-item>
                </a-col>
                <a-col :lg="8" :md="12" :sm="24">
                    <a-form-item
                        label="民族"
                    >
                        <a-select v-decorator="['lqhdahgzgx',
                        {
                            rules: [{ required: true, message: '请选择录取后档案和工资关系!' }],
                        }]" >
                        <a-select-option v-for="i in TYPE0321" :key="i.id" :value="i.code">{{ i.name }}</a-select-option>
                        </a-select>
                    </a-form-item>
                </a-col>
                <a-col :lg="8" :md="12" :sm="24">
                    <a-form-item
                        label="国家地区"
                    >
                        <a-select v-decorator="['bklb',
                        {
                            rules: [{ required: true, message: '请选择报考类别!' }],
                        }]" >
                        <a-select-option v-for="i in TYPE0321" :key="i.id" :value="i.code">{{ i.name }}</a-select-option>
                        </a-select>
                    </a-form-item>
                </a-col>
                <a-col :lg="8" :md="12" :sm="24">
                    <a-form-item
                        label="攻读本学位前户口所在省市"
                    >
                        <a-select v-decorator="['bklb',
                        {
                            rules: [{ required: true, message: '请选择报考类别!' }],
                        }]" >
                        <a-select-option v-for="i in TYPE0321" :key="i.id" :value="i.code">{{ i.name }}</a-select-option>
                        </a-select>
                    </a-form-item>
                </a-col>
                <a-col :lg="8" :md="12" :sm="24">
                    <a-form-item
                        label="出生日期"
                    >
                        <a-input  v-decorator="[
                        'dxdwmc',
                        {
                            rules: [{ required: true, message: '请输入定向单位名称!' }],
                        }
                        ]" />
                    </a-form-item>
                </a-col>
                <a-col :lg="8" :md="12" :sm="24">
                    <a-form-item
                        label="QQ号码"
                    >
                        <a-input  v-decorator="[
                        'dxdwmc',
                        {
                            rules: [{ required: true, message: '请输入定向单位名称!' }],
                        }
                        ]" />
                    </a-form-item>
                </a-col>
                <a-col :lg="8" :md="12" :sm="24">
                    <a-form-item
                        label="微信号码"
                    >
                        <a-input  v-decorator="[
                        'dxdwmc',
                        {
                            rules: [{ required: true, message: '请输入定向单位名称!' }],
                        }
                        ]" />
                    </a-form-item>
                </a-col>
                <a-col :lg="8" :md="12" :sm="24">
                    <a-form-item
                        label="邮箱"
                    >
                        <a-input  v-decorator="[
                        'dxdwmc',
                        {
                            rules: [{ required: true, message: '请输入定向单位名称!' }],
                        }
                        ]" />
                    </a-form-item>
                </a-col>
                <a-col :lg="8" :md="12" :sm="24">
                    <a-form-item
                        label="个人联系方式(手机号)"
                    >
                        <a-input  v-decorator="[
                        'dxdwmc',
                        {
                            rules: [{ required: true, message: '请输入定向单位名称!' }],
                        }
                        ]" />
                    </a-form-item>
                </a-col>
          </a-col>
          <a-col :md="4" :sm="24">
              <a-form-item
                label="照片"
              >
              <a-upload
                name="avatar"
                style="width:80%"
                listType="picture-card"
                class="avatar-uploader"
                :showUploadList="false"
                action="//jsonplaceholder.typicode.com/posts/"
                :beforeUpload="beforeUpload"
                @change="handleChange"
              >
                <img v-if="imageUrl" :src="imageUrl" alt="avatar" />
                <div v-else>
                    <a-icon :type="loading ? 'loading' : 'plus'" />
                    <div class="ant-upload-text">Upload</div>
                </div>
              </a-upload>
              <a-alert message="提示：新华社采集的毕业证照片的电子版。上传照片大小小于等10K，宽150 高210，格式JPG" type="error" />
            </a-form-item>
          </a-col>
      </a-row>
      <a-alert message="学业和学位授予信息" type="info" />
            <a-row :gutter="48" style="width:100%">
          <a-col :md="20" :sm="24">
            <a-col :lg="8" :md="12" :sm="24">
                    <a-form-item
                        label="所属院系"
                    >
                        <a-select v-decorator="['zjlx',
                        {
                            rules: [{ required: true, message: '请选择证件类型!' }],
                        }]" >
                        <a-select-option v-for="i in TYPE0321" :key="i.id" :value="i.code">{{ i.name }}</a-select-option>
                        </a-select>
                    </a-form-item>
                </a-col>
                <a-col :lg="8" :md="12" :sm="24">
                    <a-form-item
                        label="所属专业"
                    >
                        <a-select v-decorator="['zjlx',
                        {
                            rules: [{ required: true, message: '请选择证件类型!' }],
                        }]" >
                        <a-select-option v-for="i in TYPE0321" :key="i.id" :value="i.code">{{ i.name }}</a-select-option>
                        </a-select>
                    </a-form-item>
                </a-col>
                <a-col :lg="8" :md="12" :sm="24">
                    <a-form-item
                        label="学位类别"
                    >
                        <a-select v-decorator="['zjlx',
                        {
                            rules: [{ required: true, message: '请选择证件类型!' }],
                        }]" >
                        <a-select-option v-for="i in TYPE0321" :key="i.id" :value="i.code">{{ i.name }}</a-select-option>
                        </a-select>
                    </a-form-item>
                </a-col>
                <a-col :lg="8" :md="12" :sm="24">
                    <a-form-item
                        label="是否按一级学科授予"
                    >
                        <a-select v-decorator="['zjlx',
                        {
                            rules: [{ required: true, message: '请选择证件类型!' }],
                        }]" >
                        <a-select-option v-for="i in TYPE0321" :key="i.id" :value="i.code">{{ i.name }}</a-select-option>
                        </a-select>
                    </a-form-item>
                </a-col>
                <a-col :lg="8" :md="12" :sm="24">
                    <a-form-item
                        label="考生号"
                    >
                        <a-input />
                    </a-form-item>
                </a-col>
              <a-col :lg="8" :md="12" :sm="24">
                    <a-form-item
                        label="入学年月"
                    >
                        <a-select v-decorator="['zjlx',
                        {
                            rules: [{ required: true, message: '请选择证件类型!' }],
                        }]" >
                        <a-select-option v-for="i in TYPE0321" :key="i.id" :value="i.code">{{ i.name }}</a-select-option>
                        </a-select>
                    </a-form-item>
                </a-col>
                <a-col :lg="8" :md="12" :sm="24">
                    <a-form-item
                        label="学号"
                    >
                        <a-input />
                    </a-form-item>
                </a-col>
                <a-col :lg="8" :md="12" :sm="24">
                    <a-form-item
                        label="考试方式"
                    >
                        <a-select v-decorator="['zjlx',
                        {
                            rules: [{ required: true, message: '请选择证件类型!' }],
                        }]" >
                        <a-select-option v-for="i in TYPE0321" :key="i.id" :value="i.code">{{ i.name }}</a-select-option>
                        </a-select>
                    </a-form-item>
                </a-col>
                <a-col :lg="8" :md="12" :sm="24">
                    <a-form-item
                        label="综合考试合格编号"
                    >
                        <a-input />
                    </a-form-item>
                </a-col>
                <a-col :lg="8" :md="12" :sm="24">
                    <a-form-item
                        label="导师姓名"
                    >
                        <a-input />
                    </a-form-item>
                </a-col>
                <a-col :lg="8" :md="12" :sm="24">
                    <a-form-item
                        label="毕业年月"
                    >
                        <a-select v-decorator="['bklb',
                        {
                            rules: [{ required: true, message: '请选择报考类别!' }],
                        }]" >
                        <a-select-option v-for="i in TYPE0321" :key="i.id" :value="i.code">{{ i.name }}</a-select-option>
                        </a-select>
                    </a-form-item>
                </a-col>
                <a-col :lg="8" :md="12" :sm="24">
                    <a-form-item
                        label="获取学位日期"
                    >
                        <a-select v-decorator="['bklb',
                        {
                            rules: [{ required: true, message: '请选择报考类别!' }],
                        }]" >
                        <a-select-option v-for="i in TYPE0321" :key="i.id" :value="i.code">{{ i.name }}</a-select-option>
                        </a-select>
                    </a-form-item>
                </a-col>
                <a-col :lg="8" :md="12" :sm="24">
                    <a-form-item
                        label="学位证书编号"
                    >
                        <a-input />
                    </a-form-item>
                </a-col>
                <a-col :lg="8" :md="12" :sm="24">
                    <a-form-item
                        label="学位类型"
                    >
                        <a-select v-decorator="['bklb',
                        {
                            rules: [{ required: true, message: '请选择报考类别!' }],
                        }]" >
                        <a-select-option v-for="i in TYPE0321" :key="i.id" :value="i.code">{{ i.name }}</a-select-option>
                        </a-select>
                    </a-form-item>
                </a-col>
          </a-col>
      </a-row>
      <a-alert message="学位论文信息" type="info" />
            <a-row :gutter="48" style="width:100%">
          <a-col :md="20" :sm="24">
             <a-col :lg="8" :md="12" :sm="24">
                    <a-form-item
                        label="论文提示"
                    >
                        <a-input />
                    </a-form-item>
                </a-col>
                 <a-col :lg="8" :md="12" :sm="24">
                    <a-form-item
                        label="论文关键字"
                    >
                        <a-input />
                    </a-form-item>
                </a-col>
                <a-col :lg="8" :md="12" :sm="24">
                    <a-form-item
                        label="论文类型"
                    >
                        <a-select v-decorator="['zjlx',
                        {
                            rules: [{ required: true, message: '请选择证件类型!' }],
                        }]" >
                        <a-select-option v-for="i in TYPE0321" :key="i.id" :value="i.code">{{ i.name }}</a-select-option>
                        </a-select>
                    </a-form-item>
                </a-col>
                <a-col :lg="8" :md="12" :sm="24">
                    <a-form-item
                        label="论文选题来源"
                    >
                        <a-select v-decorator="['zjlx',
                        {
                            rules: [{ required: true, message: '请选择证件类型!' }],
                        }]" >
                        <a-select-option v-for="i in TYPE0321" :key="i.id" :value="i.code">{{ i.name }}</a-select-option>
                        </a-select>
                    </a-form-item>
                </a-col>
          </a-col>
      </a-row>
      <a-alert message="前置学位信息" type="info" />
            <a-row :gutter="48" style="width:100%">
          <a-col :md="20" :sm="24">
             <a-col :lg="8" :md="12" :sm="24">
                    <a-form-item
                        label="前置学位"
                    >
                        <a-input />
                    </a-form-item>
                </a-col>
                <a-col :lg="8" :md="12" :sm="24">
                    <a-form-item
                        label="前置学历"
                    >
                        <a-select v-decorator="['zjlx',
                        {
                            rules: [{ required: true, message: '请选择证件类型!' }],
                        }]" >
                        <a-select-option v-for="i in TYPE0321" :key="i.id" :value="i.code">{{ i.name }}</a-select-option>
                        </a-select>
                    </a-form-item>
                </a-col>
                <a-col :lg="8" :md="12" :sm="24">
                    <a-form-item
                        label="前置学位年月"
                    >
                        <a-select v-decorator="['zjlx',
                        {
                            rules: [{ required: true, message: '请选择证件类型!' }],
                        }]" >
                        <a-select-option v-for="i in TYPE0321" :key="i.id" :value="i.code">{{ i.name }}</a-select-option>
                        </a-select>
                    </a-form-item>
                </a-col>
                <a-col :lg="8" :md="12" :sm="24">
                    <a-form-item
                        label="前置学位授予单位"
                    >
                        <a-select v-decorator="['zjlx',
                        {
                            rules: [{ required: true, message: '请选择证件类型!' }],
                        }]" >
                        <a-select-option v-for="i in TYPE0321" :key="i.id" :value="i.code">{{ i.name }}</a-select-option>
                        </a-select>
                    </a-form-item>
                </a-col>
          </a-col>
      </a-row>
      <a-alert message="获学位后去向信息" type="info" />
            <a-row :gutter="48" style="width:100%">
          <a-col :md="20" :sm="24">
             <a-col :lg="8" :md="12" :sm="24">
                    <a-form-item
                        label="去向"
                    >
                        <a-input />
                    </a-form-item>
                </a-col>
                <a-col :lg="8" :md="12" :sm="24">
                    <a-form-item
                        label="就业单位性质"
                    >
                        <a-select v-decorator="['zjlx',
                        {
                            rules: [{ required: true, message: '请选择证件类型!' }],
                        }]" >
                        <a-select-option v-for="i in TYPE0321" :key="i.id" :value="i.code">{{ i.name }}</a-select-option>
                        </a-select>
                    </a-form-item>
                </a-col>
                <a-col :lg="8" :md="12" :sm="24">
                    <a-form-item
                        label="就业单位省市"
                    >
                        <a-select v-decorator="['zjlx',
                        {
                            rules: [{ required: true, message: '请选择证件类型!' }],
                        }]" >
                        <a-select-option v-for="i in TYPE0321" :key="i.id" :value="i.code">{{ i.name }}</a-select-option>
                        </a-select>
                    </a-form-item>
                </a-col>
                <a-col :lg="8" :md="12" :sm="24">
                    <a-form-item
                        label="工作性质"
                    >
                        <a-select v-decorator="['zjlx',
                        {
                            rules: [{ required: true, message: '请选择证件类型!' }],
                        }]" >
                        <a-select-option v-for="i in TYPE0321" :key="i.id" :value="i.code">{{ i.name }}</a-select-option>
                        </a-select>
                    </a-form-item>
                </a-col>
          </a-col>
      </a-row>
      <a-alert message="其他信息" type="info" />
            <a-row :gutter="48" style="width:100%">
          <a-col :md="20" :sm="24">
             <a-col :lg="8" :md="12" :sm="24">
                    <a-form-item
                        label="备注"
                    >
                        <a-input />
                    </a-form-item>
                </a-col>
          </a-col>
      </a-row>
      <div style="text-align: center;padding-bottom: 50px; ">
         <a-button type="primary">提交</a-button>
            <a-button type="primary">关闭</a-button>
      </div>
        </a-form>
    <div class="drawer-bootom-button" style="z-index:1">
        <div style="float:right">
            <a-button type="primary" @click="handleCancel">关闭窗口</a-button>
        </div>
    </div>
  </a-drawer>
</template>

<script>

export default {
  props: {
    editVisible: {
      default: false
    }
  },
  data () {
    return {
      loading: false,
      queryParam: {},
      TYPE0321:[],
      data:[],
      imageUrl: '',
      selectMenu: {
        yx: [] // 院系
      },
      TYPE0126:[],
      form: this.$form.createForm(this),
      options: {
        alert: { show: false },
        rowSelection: {
          onChange: (selectedRowKeys, selectedRows) => {
            console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows)
          },
          onSelect: (record, selected, selectedRows) => {
            console.log(record, selected, selectedRows)
          },
          onSelectAll: (selected, selectedRows, changeRows) => {
            console.log(selected, selectedRows, changeRows)
          }
        }
      },
      // 当前所在信息节点
      infoIdx: 0,
      baseInfo:{}
    }
  },
  created () {
  },
  methods: {
    // 关闭
    handleCancel () {
      this.$emit('close')
    },
    // 保存修改
    handleSave () {

    },
    yxChange(){},
    handleChange (info) {
      if (info.file.status === 'uploading') {
        this.loading = true
        return
      }
      if (info.file.status === 'done') {
        // Get this url from response in real world.
        getBase64(info.file.originFileObj, (imageUrl) => {
          this.imageUrl = imageUrl
          this.loading = false
        })
      }
    },
    beforeUpload (file) {
      const isJPG = file.type === 'image/jpeg'
      if (!isJPG) {
        this.$message.error('You can only upload JPG file!')
      }
      const isLt2M = file.size / 1024 / 1024 < 2
      if (!isLt2M) {
        this.$message.error('Image must smaller than 2MB!')
      }
      return isJPG && isLt2M
    }
  }
}
</script>

<style lang="less">
.fullscreen{
    .ant-drawer-wrapper-body{
        height: 100%;
        overflow: auto;
    }
}
</style>
